<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致筑网 - 应用商城</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind主题 - 保持公司风格一致性 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0a3d62',      // 工程深蓝（主色调）
                        secondary: '#3c6382',    // 工程浅蓝（辅助色）
                        accent: '#60a3bc',       // 工程亮蓝（强调色）
                        success: '#27ae60',      // 成功色
                        warning: '#f39c12',      // 警告色
                        danger: '#e74c3c',       // 危险色
                        neutral: {
                            100: '#f5f6fa',     // 最浅背景色
                            200: '#dcdde1',     // 边框和分割线
                            300: '#b2bec3',     // 次要文本和图标
                            600: '#636e72',     // 中等重要文本
                            700: '#2d3436',     // 主要文本
                            800: '#1e272e',     // 标题文本
                            900: '#192a56',     // 深色背景
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .app-card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
                scrollbar-color: theme('colors.neutral.300') transparent;
            }
            .scrollbar-thin::-webkit-scrollbar {
                width: 5px;
                height: 5px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                @apply bg-neutral-300 rounded-full hover:bg-neutral-400 transition-colors;
            }
            .notification-badge {
                @apply absolute -top-1 -right-1 w-5 h-5 bg-danger text-white text-xs rounded-full flex items-center justify-center;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-700 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <!-- 左侧：Logo和名称 -->
            <div class="flex items-center">
                <!-- 移动端菜单按钮 -->
                <button id="mobile-menu-button" class="md:hidden p-2 mr-2 rounded-md text-neutral-600 hover:text-primary hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>

                <!-- 公司Logo和名称 -->
                <div class="flex items-center">
                    <i class="fa fa-cubes text-2xl text-primary mr-3"></i>
                    <span class="text-xl font-bold text-neutral-800">致筑网</span>
                    <span class="hidden md:inline-block ml-2 text-sm text-neutral-600">应用商城</span>
                </div>
            </div>

            <!-- 中间：搜索框 - 仅在中等以上屏幕显示 -->
            <div class="hidden md:flex items-center flex-1 max-w-md mx-8">
                <div class="relative w-full">
                    <input type="text" id="search-input"
                           class="w-full pl-10 pr-4 py-2 rounded-lg border border-neutral-200 focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all"
                           placeholder="搜索应用、工具或文档...">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                            <i class="fa fa-search"></i>
                        </span>
                </div>
            </div>

            <!-- 右侧：用户相关功能 -->
            <div class="flex items-center space-x-1 md:space-x-3">
                <!-- 搜索按钮 - 仅在移动端显示 -->
                <button id="mobile-search-button" class="md:hidden p-2 rounded-full hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-search text-neutral-600"></i>
                </button>

                <!-- 通知中心 -->
                <div class="relative">
                    <button id="notification-button" class="p-2 rounded-full hover:bg-neutral-100 transition-colors relative">
                        <i class="fa fa-bell text-neutral-600"></i>
                        <!-- 通知数量提示 -->
                        <span class="notification-badge" id="notification-count">3</span>
                    </button>
                </div>

                <!-- 帮助中心 -->
                <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-question-circle text-neutral-600"></i>
                </button>

                <!-- 用户头像和下拉菜单 -->
                <div class="relative ml-2" id="user-menu-container">
                    <button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                        <span class="hidden md:inline-block text-sm font-medium" id="user-display-name">张工程师</span>
                        <i class="fa fa-chevron-down text-xs text-neutral-500 hidden md:block"></i>
                    </button>

                    <!-- 用户下拉菜单 - 默认隐藏 -->
                    <div id="user-dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-50 border border-neutral-200">
                        <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
                            <i class="fa fa-user-circle mr-2"></i>个人资料
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
                            <i class="fa fa-cog mr-2"></i>账户设置
                        </a>
                        <div class="border-t border-neutral-200 my-1"></div>
                        <a href="#" id="logout-button" class="block px-4 py-2 text-sm text-danger hover:bg-neutral-100">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 移动端搜索框 - 默认隐藏 -->
        <div id="mobile-search-container" class="md:hidden pb-4 hidden">
            <div class="relative w-full">
                <input type="text"
                       class="w-full pl-10 pr-4 py-2 rounded-lg border border-neutral-200 focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all"
                       placeholder="搜索应用、工具或文档...">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                        <i class="fa fa-search"></i>
                    </span>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区 -->
<main class="flex-1 flex overflow-hidden">
    <!-- 侧边栏导航 - 应用分类 -->
    <aside id="sidebar" class="w-64 bg-white shadow-sm border-r border-neutral-200 flex-shrink-0 hidden md:block overflow-y-auto scrollbar-thin">
        <nav class="p-4">
            <div class="mb-6">
                <h3 class="text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-3">应用分类</h3>
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="nav-item-active flex items-center px-3 py-2 text-sm rounded-md">
                            <i class="fa fa-th-large w-6 text-center mr-3"></i>
                            <span>全部应用</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-line-chart w-6 text-center mr-3"></i>
                            <span>项目管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-paint-brush w-6 text-center mr-3"></i>
                            <span>设计工具</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-calculator w-6 text-center mr-3"></i>
                            <span>造价算量</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-shield w-6 text-center mr-3"></i>
                            <span>安全管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-file-text w-6 text-center mr-3"></i>
                            <span>文档管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-users w-6 text-center mr-3"></i>
                            <span>团队协作</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="mb-6">
                <h3 class="text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-3">我的应用</h3>
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-download w-6 text-center mr-3"></i>
                            <span>已安装</span>
                            <span class="ml-auto bg-neutral-200 text-neutral-700 text-xs px-2 py-0.5 rounded-full">5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-star-o w-6 text-center mr-3"></i>
                            <span>收藏夹</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-history w-6 text-center mr-3"></i>
                            <span>使用记录</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div>
                <h3 class="text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-3">资源中心</h3>
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-book w-6 text-center mr-3"></i>
                            <span>帮助文档</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-play-circle w-6 text-center mr-3"></i>
                            <span>视频教程</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-neutral-700 hover:bg-neutral-100 transition-colors">
                            <i class="fa fa-file-pdf-o w-6 text-center mr-3"></i>
                            <span>模板下载</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </aside>

    <!-- 主内容区域 -->
    <div class="flex-1 overflow-y-auto scrollbar-thin p-4 md:p-6 bg-neutral-50">
        <!-- 欢迎信息和快捷入口 -->
        <div class="mb-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
                <div>
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-800">欢迎回来，<span id="welcome-username">张工程师</span></h1>
                    <p class="text-neutral-600 mt-1">今天是 <span id="current-date"></span>，有 <span id="update-count">3</span> 个应用更新可用</p>
                </div>
                <div class="mt-4 md:mt-0 flex space-x-3">
                    <button class="flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                        <i class="fa fa-plus mr-2"></i>
                        <span>添加应用</span>
                    </button>
                    <button class="flex items-center px-4 py-2 bg-white border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors">
                        <i class="fa fa-cog mr-2 text-neutral-600"></i>
                        <span>设置</span>
                    </button>
                </div>
            </div>

            <!-- 快捷功能卡片 -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white rounded-xl p-4 shadow-sm app-card-hover">
                    <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
                        <i class="fa fa-rocket text-primary"></i>
                    </div>
                    <h3 class="font-medium text-neutral-800">我的工作台</h3>
                    <p class="text-xs text-neutral-500 mt-1">快速访问常用工具</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm app-card-hover">
                    <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-3">
                        <i class="fa fa-calendar-check-o text-accent"></i>
                    </div>
                    <h3 class="font-medium text-neutral-800">项目进度</h3>
                    <p class="text-xs text-neutral-500 mt-1">查看今日待办事项</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm app-card-hover">
                    <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center mb-3">
                        <i class="fa fa-cloud-upload text-success"></i>
                    </div>
                    <h3 class="font-medium text-neutral-800">数据同步</h3>
                    <p class="text-xs text-neutral-500 mt-1">最近更新于1小时前</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm app-card-hover">
                    <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center mb-3">
                        <i class="fa fa-bell text-warning"></i>
                    </div>
                    <h3 class="font-medium text-neutral-800">系统通知</h3>
                    <p class="text-xs text-neutral-500 mt-1">3条未读消息</p>
                </div>
            </div>
        </div>

        <!-- 推荐应用 -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-neutral-800">推荐应用</h2>
                <a href="#" class="text-sm text-primary hover:underline">查看全部</a>
            </div>

            <!-- 推荐应用轮播 -->
            <div class="relative">
                <div class="overflow-x-auto scrollbar-thin pb-4">
                    <div class="flex space-x-4 min-w-max">
                        <!-- 推荐应用1 - 项目管理系统 -->
                        <div class="bg-white rounded-xl shadow-sm w-72 app-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/180/400/200" alt="项目管理系统" class="w-full h-40 object-cover rounded-t-xl">
                                <span class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded-full">推荐</span>
                            </div>
                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-semibold text-neutral-800">项目管理系统</h3>
                                    <div class="flex items-center">
                                        <i class="fa fa-star text-warning text-xs"></i>
                                        <span class="text-xs text-neutral-600 ml-1">4.8</span>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">全面的工程项目管理解决方案，涵盖进度、质量、安全管理</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-500">10,000+ 下载</span>
                                    <button class="px-3 py-1 bg-primary text-white text-sm rounded-lg hover:bg-primary/90 transition-colors app-action-btn" data-app-id="pm-system">
                                        打开
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 推荐应用2 - BIM建模工具 -->
                        <div class="bg-white rounded-xl shadow-sm w-72 app-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/1071/400/200" alt="BIM建模工具" class="w-full h-40 object-cover rounded-t-xl">
                                <span class="absolute top-3 right-3 bg-success text-white text-xs px-2 py-1 rounded-full">新应用</span>
                            </div>
                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-semibold text-neutral-800">BIM建模工具</h3>
                                    <div class="flex items-center">
                                        <i class="fa fa-star text-warning text-xs"></i>
                                        <span class="text-xs text-neutral-600 ml-1">4.9</span>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">专业建筑信息模型创建与编辑工具，支持多格式导出</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-500">5,200+ 下载</span>
                                    <button class="px-3 py-1 bg-primary text-white text-sm rounded-lg hover:bg-primary/90 transition-colors app-action-btn" data-app-id="bim-tool">
                                        下载
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 推荐应用3 - 工程资料管理 -->
                        <div class="bg-white rounded-xl shadow-sm w-72 app-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/24/400/200" alt="工程资料管理" class="w-full h-40 object-cover rounded-t-xl">
                            </div>
                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-semibold text-neutral-800">工程资料管理</h3>
                                    <div class="flex items-center">
                                        <i class="fa fa-star text-warning text-xs"></i>
                                        <span class="text-xs text-neutral-600 ml-1">4.7</span>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">规范化工程资料管理与归档，支持在线预览与审批</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-500">8,700+ 下载</span>
                                    <button class="px-3 py-1 bg-primary text-white text-sm rounded-lg hover:bg-primary/90 transition-colors app-action-btn" data-app-id="doc-management">
                                        打开
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 推荐应用4 - 施工现场管理 -->
                        <div class="bg-white rounded-xl shadow-sm w-72 app-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/429/400/200" alt="施工现场管理" class="w-full h-40 object-cover rounded-t-xl">
                                <span class="absolute top-3 right-3 bg-warning text-white text-xs px-2 py-1 rounded-full">更新</span>
                            </div>
                            <div class="p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-semibold text-neutral-800">施工现场管理</h3>
                                    <div class="flex items-center">
                                        <i class="fa fa-star text-warning text-xs"></i>
                                        <span class="text-xs text-neutral-600 ml-1">4.6</span>
                                    </div>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4 line-clamp-2">移动端施工现场巡检与问题跟踪，实时上传现场照片</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-neutral-500">7,300+ 下载</span>
                                    <button class="px-3 py-1 bg-accent text-white text-sm rounded-lg hover:bg-accent/90 transition-colors app-action-btn" data-app-id="site-management">
                                        更新
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 轮播控制按钮 -->
                <button class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-white shadow-md w-8 h-8 rounded-full flex items-center justify-center text-neutral-600 hover:text-primary transition-colors md:flex hidden">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <button class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-white shadow-md w-8 h-8 rounded-full flex items-center justify-center text-neutral-600 hover:text-primary transition-colors md:flex hidden">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>
        </div>

        <!-- 应用分类展示 -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-neutral-800">应用分类</h2>
                <a href="#" class="text-sm text-primary hover:underline">更多分类</a>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 项目管理类 -->
                <div class="bg-white rounded-xl shadow-sm p-4 app-card-hover">
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fa fa-line-chart text-primary text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-neutral-800 mb-1">项目管理</h3>
                            <p class="text-sm text-neutral-600 mb-3">12 个应用</p>
                            <div class="flex -space-x-2 mb-3">
                                <img src="https://picsum.photos/id/1001/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1002/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1003/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral-100 flex items-center justify-center text-xs font-medium text-neutral-600">+9</div>
                            </div>
                            <a href="#" class="text-sm text-primary hover:underline">查看全部</a>
                        </div>
                    </div>
                </div>

                <!-- 设计工具类 -->
                <div class="bg-white rounded-xl shadow-sm p-4 app-card-hover">
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fa fa-paint-brush text-accent text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-neutral-800 mb-1">设计工具</h3>
                            <p class="text-sm text-neutral-600 mb-3">8 个应用</p>
                            <div class="flex -space-x-2 mb-3">
                                <img src="https://picsum.photos/id/1004/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1005/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1006/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral-100 flex items-center justify-center text-xs font-medium text-neutral-600">+5</div>
                            </div>
                            <a href="#" class="text-sm text-primary hover:underline">查看全部</a>
                        </div>
                    </div>
                </div>

                <!-- 安全管理类 -->
                <div class="bg-white rounded-xl shadow-sm p-4 app-card-hover">
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fa fa-shield text-success text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-neutral-800 mb-1">安全管理</h3>
                            <p class="text-sm text-neutral-600 mb-3">6 个应用</p>
                            <div class="flex -space-x-2 mb-3">
                                <img src="https://picsum.photos/id/1009/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1010/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <img src="https://picsum.photos/id/1011/100/100" alt="应用图标" class="w-8 h-8 rounded-full border-2 border-white">
                                <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral-100 flex items-center justify-center text-xs font-medium text-neutral-600">+3</div>
                            </div>
                            <a href="#" class="text-sm text-primary hover:underline">查看全部</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最新上架应用 -->
        <div>
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-neutral-800">最新上架</h2>
                <a href="#" class="text-sm text-primary hover:underline">查看全部</a>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 最新应用1 -->
                <div class="bg-white rounded-xl shadow-sm app-card-hover">
                    <div class="p-4">
                        <div class="flex items-start mb-3">
                            <img src="https://picsum.photos/id/1012/100/100" alt="智能算量工具" class="w-12 h-12 rounded-lg object-cover mr-3">
                            <div>
                                <h3 class="font-medium text-neutral-800">智能算量工具</h3>
                                <p class="text-xs text-neutral-500">造价算量</p>
                            </div>
                        </div>
                        <p class="text-sm text-neutral-600 mb-3 line-clamp-2">自动化工程量计算，支持多专业快速算量</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-neutral-500">2天前上架</span>
                            <button class="px-2 py-1 border border-primary text-primary text-xs rounded-lg hover:bg-primary/5 transition-colors app-action-btn" data-app-id="quantity-calculator">
                                下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 最新应用2 -->
                <div class="bg-white rounded-xl shadow-sm app-card-hover">
                    <div class="p-4">
                        <div class="flex items-start mb-3">
                            <img src="https://picsum.photos/id/1013/100/100" alt="材料管理系统" class="w-12 h-12 rounded-lg object-cover mr-3">
                            <div>
                                <h3 class="font-medium text-neutral-800">材料管理系统</h3>
                                <p class="text-xs text-neutral-500">资源管理</p>
                            </div>
                        </div>
                        <p class="text-sm text-neutral-600 mb-3 line-clamp-2">工程材料采购、库存与使用全过程管理</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-neutral-500">3天前上架</span>
                            <button class="px-2 py-1 border border-primary text-primary text-xs rounded-lg hover:bg-primary/5 transition-colors app-action-btn" data-app-id="material-management">
                                下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 最新应用3 -->
                <div class="bg-white rounded-xl shadow-sm app-card-hover">
                    <div class="p-4">
                        <div class="flex items-start mb-3">
                            <img src="https://picsum.photos/id/1014/100/100" alt="质量验收APP" class="w-12 h-12 rounded-lg object-cover mr-3">
                            <div>
                                <h3 class="font-medium text-neutral-800">质量验收APP</h3>
                                <p class="text-xs text-neutral-500">质量管理</p>
                            </div>
                        </div>
                        <p class="text-sm text-neutral-600 mb-3 line-clamp-2">移动端工程质量验收与问题整改跟踪</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-neutral-500">5天前上架</span>
                            <button class="px-2 py-1 border border-primary text-primary text-xs rounded-lg hover:bg-primary/5 transition-colors app-action-btn" data-app-id="quality-inspection">
                                下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 最新应用4 -->
                <div class="bg-white rounded-xl shadow-sm app-card-hover">
                    <div class="p-4">
                        <div class="flex items-start mb-3">
                            <img src="https://picsum.photos/id/1015/100/100" alt="施工日志系统" class="w-12 h-12 rounded-lg object-cover mr-3">
                            <div>
                                <h3 class="font-medium text-neutral-800">施工日志系统</h3>
                                <p class="text-xs text-neutral-500">项目管理</p>
                            </div>
                        </div>
                        <p class="text-sm text-neutral-600 mb-3 line-clamp-2">规范化施工日志填写与查阅，支持数据统计</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-neutral-500">1周前上架</span>
                            <button class="px-2 py-1 border border-primary text-primary text-xs rounded-lg hover:bg-primary/5 transition-colors app-action-btn" data-app-id="construction-log">
                                下载
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-neutral-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center mb-4 md:mb-0">
                <i class="fa fa-cubes text-xl text-primary mr-2"></i>
                <span class="font-bold text-neutral-800">致筑网</span>
                <span class="text-neutral-500 text-sm ml-3">© 2024 致筑网科技有限公司</span>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-question-circle mr-1"></i> 帮助中心
                </a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-file-text-o mr-1"></i> 使用条款
                </a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-shield mr-1"></i> 隐私政策
                </a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-envelope-o mr-1"></i> 联系我们
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- 加载中提示 - 默认隐藏 -->
<!--<div id="loading-overlay" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">-->
<!--    <div class="bg-white p-6 rounded-lg shadow-xl flex items-center">-->
<!--        <i class="fa fa-spinner fa-spin text-primary text-2xl mr-3"></i>-->
<!--        <span>加载中，请稍候...</span>-->
<!--    </div>-->
<!--</div>-->

<!-- JavaScript 功能实现 -->
<script>
    // ==============================================
    // Token 管理工具函数 - 重点关注这部分
    // ==============================================

    /**
     * Token 存储工具类
     * 负责token的保存、获取、删除和验证
     */
    const TokenManager = {
        // Token存储的键名
        TOKEN_KEY: 'zhizhu_app_store_token',
        // Token过期时间存储的键名
        EXPIRY_KEY: 'token_expiry',

        /**
         * 保存token到本地存储
         * @param {string} token - 后端返回的token字符串
         * @param {number} expiresIn - 有效期（秒），通常从后端获取
         */
        saveToken: function(token, expiresIn) {
            // 计算token过期时间（当前时间 + 有效期）
            const expiryTime = new Date().getTime() + (expiresIn * 1000);

            // 保存到localStorage
            localStorage.setItem(this.TOKEN_KEY, token);
            localStorage.setItem(this.EXPIRY_KEY, expiryTime.toString());

            console.log('Token已保存，有效期至:', new Date(expiryTime).toLocaleString());
        },

        /**
         * 从本地存储获取token
         * @returns {string|null} - 返回token或null
         */
        getToken: function() {
            // 先检查token是否存在且未过期
            if (!this.isTokenValid()) {
                this.removeToken();
                return null;
            }

            return localStorage.getItem(this.TOKEN_KEY);
        },

        /**
         * 检查token是否有效（存在且未过期）
         * @returns {boolean} - 是否有效
         */
        isTokenValid: function() {
            const token = localStorage.getItem(this.TOKEN_KEY);
            // const expiryTime = localStorage.getItem(this.EXPIRY_KEY);
            console.log(token)
            // 检查token是否存在
            if (!token) {
                return false;
            }

            // 检查token是否过期
            const currentTime = new Date().getTime();
            return currentTime < parseInt(expiryTime);
        },

        /**
         * 从本地存储删除token
         */
        removeToken: function() {
            localStorage.removeItem(this.TOKEN_KEY);
            localStorage.removeItem(this.EXPIRY_KEY);
            console.log('Token已删除');
        }
    };

    // ==============================================
    // 认证相关函数
    // ==============================================

    /**
     * 检查用户是否已登录（token是否有效）
     * 如果未登录，跳转到登录页
     */
    function checkLoginStatus() {
        // 显示加载状态
        showLoading();

        // 检查token是否有效
        if (!TokenManager.isTokenValid()) {
            console.log('未检测到有效登录状态，跳转到登录页');
            hideLoading();
            // 跳转到登录页，记录当前页面地址以便登录后返回
            window.location.href = `/login.html?redirect=${encodeURIComponent(window.location.href)}`;
            return false;
        }

        console.log('登录状态有效');
        return true;
    }

    /**
     * 处理退出登录
     */
    function handleLogout() {
        if (confirm('确定要退出登录吗？')) {
            // 调用后端退出登录接口（可选）
            fetchLogout()
                .then(() => {
                    // 清除本地token
                    TokenManager.removeToken();
                    // 跳转到登录页
                    window.location.href = '/login.html';
                })
                .catch(error => {
                    console.error('退出登录失败:', error);
                    // 即使后端调用失败，也清除本地token
                    TokenManager.removeToken();
                    window.location.href = '/temp/login';
                });
        }
    }

    // ==============================================
    // API调用工具函数 - 所有请求都会自动带上token
    // ==============================================

    /**
     * 带认证的API请求工具函数
     * 自动添加Authorization头，处理401错误
     * @param {string} url - 请求地址
     * @param {Object} options - fetch选项
     * @returns {Promise} - 返回Promise对象
     */
    function authenticatedFetch(url, options = {}) {
        // 获取token
        const token = TokenManager.getToken();

        // 如果token不存在，直接拒绝
        if (!token) {
            return Promise.reject(new Error('未登录或登录已过期'));
        }

        // 设置默认headers
        const headers = {
            'Content-Type': 'application/json',
            ...options.headers
        };

        // 添加Authorization头
        headers['Authorization'] = `Bearer ${token}`;

        // 合并选项
        const fetchOptions = {
            ...options,
            headers
        };

        // 发送请求
        return fetch(url, fetchOptions)
            .then(response => {
                // 处理401未授权错误
                if (response.status === 401) {
                    // 清除无效token
                    TokenManager.removeToken();
                    // 跳转到登录页
                    window.location.href = `/temp/login?redirect=${encodeURIComponent(window.location.href)}`;
                    return Promise.reject(new Error('登录已过期，请重新登录'));
                }

                // 处理其他错误状态码
                if (!response.ok) {
                    return response.json()
                        .then(data => {
                            throw new Error(data.message || `请求失败: ${response.status}`);
                        })
                        .catch(() => {
                            throw new Error(`请求失败: ${response.status}`);
                        });
                }

                // 解析JSON响应
                return response.json();
            });
    }

    // ==============================================
    // 后端接口调用 - 已集成token认证
    // ==============================================

    /**
     * 从后端加载应用数据
     */
    function loadAppData() {
        console.log('开始加载应用数据');

        // 后端API地址 - 请替换为您的实际接口地址
        const apiUrl = '/api/apps';

        // 使用带认证的请求
        authenticatedFetch(apiUrl)
            .then(apps => {
                console.log('成功加载应用数据:', apps);
                // 这里可以添加渲染应用列表的逻辑
                // renderAppList(apps);
            })
            .catch(error => {
                console.error('加载应用数据失败:', error);
                showErrorNotification('应用数据加载失败，请稍后重试');
            })
            .finally(() => {
                hideLoading();
            });
    }

    /**
     * 从后端加载用户信息
     */
    function loadUserInfo() {
        console.log('开始加载用户信息');

        // 后端API地址 - 请替换为您的实际接口地址
        const apiUrl = '/api/user/current';

        // 使用带认证的请求
        authenticatedFetch(apiUrl)
            .then(user => {
                console.log('成功加载用户信息:', user);
                // 更新页面上的用户信息
                updateUserInfo(user);
            })
            .catch(error => {
                console.error('加载用户信息失败:', error);
                showErrorNotification('用户信息加载失败');
            });
    }

    /**
     * 搜索应用后端接口调用
     * @param {string} keyword - 搜索关键词
     */
    function fetchAppSearchResults(keyword) {
        // 后端API地址 - 请替换为您的实际接口地址
        const apiUrl = `/api/apps/search?keyword=${encodeURIComponent(keyword)}`;

        return authenticatedFetch(apiUrl);
    }

    /**
     * 获取通知列表后端接口调用
     */
    function fetchNotifications() {
        // 后端API地址 - 请替换为您的实际接口地址
        const apiUrl = '/api/notifications';

        return authenticatedFetch(apiUrl)
            .then(notifications => {
                console.log('成功获取通知列表:', notifications);
                // 更新通知数量
                const unreadCount = notifications.filter(notification => !notification.read).length;
                document.getElementById('notification-count').textContent = unreadCount;
                return notifications;
            });
    }

    /**
     * 下载/安装应用后端接口调用
     * @param {string} appId - 应用ID
     */
    function downloadApp(appId) {
        console.log(`开始下载应用: ${appId}`);

        // 后端API地址 - 请替换为您的实际接口地址
        const apiUrl = `/api/apps/${appId}/download`;

        return authenticatedFetch(apiUrl, {
            method: 'POST'
        });
    }

    /**
     * 退出登录接口调用
     */
    function fetchLogout() {
        // 后端API地址 - 请替换为您的实际接口地址
        const apiUrl = '/api/auth/logout';

        return authenticatedFetch(apiUrl, {
            method: 'POST'
        });
    }

    // ==============================================
    // 页面功能初始化
    // ==============================================

    // 页面加载完成后执行初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 检查登录状态，如果未登录会自动跳转
        if (!checkLoginStatus()) {
            return; // 如果未登录，不再执行后续初始化
        }

        // 初始化页面功能
        initPageFunctions();

        // 加载应用数据和用户信息
        loadAppData();
        loadUserInfo();
        loadNotifications();
    });

    /**
     * 初始化页面功能
     */
    function initPageFunctions() {
        // 显示当前日期
        displayCurrentDate();

        // 初始化移动端菜单
        initMobileMenu();

        // 初始化搜索功能
        initSearchFunction();

        // 初始化通知功能
        initNotificationFunction();

        // 初始化用户菜单
        initUserMenu();

        // 初始化应用操作按钮
        initAppActionButtons();
    }

    // ==============================================
    // 页面功能实现
    // ==============================================

    /**
     * 显示当前日期
     */
    function displayCurrentDate() {
        const now = new Date();
        const options = {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            weekday: 'long'
        };
        const formattedDate = now.toLocaleDateString('zh-CN', options);
        document.getElementById('current-date').textContent = formattedDate;
    }

    /**
     * 初始化移动端菜单
     */
    function initMobileMenu() {
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const sidebar = document.getElementById('sidebar');

        mobileMenuButton.addEventListener('click', function() {
            sidebar.classList.toggle('hidden');
            sidebar.classList.toggle('fixed');
            sidebar.classList.toggle('inset-0');
            sidebar.classList.toggle('z-50');
        });

        // 点击外部关闭侧边栏
        document.addEventListener('click', function(event) {
            if (window.innerWidth < 768 &&
                !sidebar.classList.contains('hidden') &&
                !sidebar.contains(event.target) &&
                event.target !== mobileMenuButton) {
                sidebar.classList.add('hidden');
                sidebar.classList.remove('fixed', 'inset-0', 'z-50');
            }
        });
    }

    /**
     * 初始化搜索功能
     */
    function initSearchFunction() {
        const mobileSearchButton = document.getElementById('mobile-search-button');
        const mobileSearchContainer = document.getElementById('mobile-search-container');

        mobileSearchButton.addEventListener('click', function() {
            mobileSearchContainer.classList.toggle('hidden');
            if (!mobileSearchContainer.classList.contains('hidden')) {
                mobileSearchContainer.querySelector('input').focus();
            }
        });

        // 搜索输入框回车事件
        const searchInputs = [
            document.getElementById('search-input'),
            mobileSearchContainer.querySelector('input')
        ];

        searchInputs.forEach(input => {
            if (input) {
                input.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        const searchTerm = this.value.trim();
                        if (searchTerm) {
                            searchApps(searchTerm);
                        }
                    }
                });
            }
        });
    }

    /**
     * 搜索应用
     * @param {string} keyword - 搜索关键词
     */
    function searchApps(keyword) {
        console.log('搜索应用:', keyword);
        showLoading();

        fetchAppSearchResults(keyword)
            .then(results => {
                console.log('搜索结果:', results);
                alert(`搜索到 ${results.length} 个相关应用`);
            })
            .catch(error => {
                console.error('搜索失败:', error);
                showErrorNotification('搜索失败，请稍后重试');
            })
            .finally(() => {
                hideLoading();
            });
    }

    /**
     * 初始化通知功能
     */
    function initNotificationFunction() {
        const notificationButton = document.getElementById('notification-button');

        notificationButton.addEventListener('click', function(e) {
            e.stopPropagation();
            showLoading();

            loadNotifications()
                .then(notifications => {
                    // 这里可以实现显示通知列表的逻辑
                    alert(`您有 ${notifications.length} 条通知`);
                })
                .catch(error => {
                    console.error('加载通知失败:', error);
                    showErrorNotification('加载通知失败');
                })
                .finally(() => {
                    hideLoading();
                });
        });
    }

    /**
     * 初始化用户菜单
     */
    function initUserMenu() {
        const userMenuButton = document.getElementById('user-menu-button');
        const userDropdownMenu = document.getElementById('user-dropdown-menu');
        const logoutButton = document.getElementById('logout-button');

        // 切换用户菜单显示/隐藏
        userMenuButton.addEventListener('click', function(e) {
            e.stopPropagation();
            userDropdownMenu.classList.toggle('hidden');
        });

        // 点击外部关闭用户菜单
        document.addEventListener('click', function() {
            userDropdownMenu.classList.add('hidden');
        });

        // 阻止菜单内部点击事件冒泡
        userDropdownMenu.addEventListener('click', function(e) {
            e.stopPropagation();
        });

        // 绑定退出登录事件
        logoutButton.addEventListener('click', handleLogout);
    }

    /**
     * 初始化应用操作按钮
     */
    function initAppActionButtons() {
        // 为所有应用操作按钮绑定事件
        document.querySelectorAll('.app-action-btn').forEach(button => {
            button.addEventListener('click', function() {
                const appId = this.getAttribute('data-app-id');
                const action = this.textContent.trim(); // 获取按钮文本："下载"、"打开"、"更新"等

                // 显示加载状态
                const originalText = this.innerHTML;
                this.disabled = true;
                this.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 处理中...';

                // 根据操作类型执行不同逻辑
                if (action === '下载' || action === '更新') {
                    // 下载或更新应用
                    downloadApp(appId)
                        .then(result => {
                            console.log(`应用${action}成功:`, result);
                            this.innerHTML = '<i class="fa fa-check mr-1"></i> 成功';

                            // 2秒后更新按钮状态
                            setTimeout(() => {
                                this.disabled = false;
                                this.innerHTML = action === '下载' ? '打开' : originalText;

                                // 如果是更新操作，更新计数
                                if (action === '更新') {
                                    const updateCountEl = document.getElementById('update-count');
                                    const currentCount = parseInt(updateCountEl.textContent);
                                    if (currentCount > 0) {
                                        updateCountEl.textContent = currentCount - 1;
                                    }
                                }
                            }, 2000);
                        })
                        .catch(error => {
                            console.error(`应用${action}失败:`, error);
                            this.innerHTML = '<i class="fa fa-times mr-1"></i> 失败';

                            // 2秒后恢复按钮状态
                            setTimeout(() => {
                                this.disabled = false;
                                this.innerHTML = originalText;
                            }, 2000);
                        });
                } else if (action === '打开') {
                    // 打开应用（这里只是模拟）
                    setTimeout(() => {
                        console.log(`打开应用: ${appId}`);
                        this.disabled = false;
                        this.innerHTML = originalText;
                        alert(`正在打开应用: ${this.closest('.app-card-hover').querySelector('h3').textContent}`);
                    }, 800);
                }
            });
        });
    }

    // ==============================================
    // 页面更新函数
    // ==============================================

    /**
     * 更新页面上的用户信息
     * @param {Object} user - 用户信息对象
     */
    function updateUserInfo(user) {
        // 更新用户名显示
        const userNameElements = [
            document.getElementById('user-display-name'),
            document.getElementById('welcome-username')
        ];

        userNameElements.forEach(el => {
            if (el && user.name) {
                el.textContent = user.name;
            }
        });

        // 更新用户头像
        const userAvatarElement = document.querySelector('#user-menu-button img');
        if (userAvatarElement && user.avatarUrl) {
            userAvatarElement.src = user.avatarUrl;
            userAvatarElement.alt = user.name || '用户头像';
        }
    }

    // ==============================================
    // 加载状态和错误提示
    // ==============================================

    /**
     * 显示加载状态
     */
    function showLoading() {
        document.getElementById('loading-overlay').classList.remove('hidden');
    }

    /**
     * 隐藏加载状态
     */
    function hideLoading() {
        document.getElementById('loading-overlay').classList.add('hidden');
    }

    /**
     * 显示错误通知
     * @param {string} message - 错误信息
     */
    function showErrorNotification(message) {
        alert(`错误: ${message}`);
    }
</script>
</body>
</html>
